<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: 16 条</span>
        </template>

        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small">excel导出</el-button>
          <!-- top 属性, 配置弹层位置(top是dialog组件的属性，值vh是相对单位) -->
          <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" type="index" :index="handleIndex" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <!-- formatter的作用专门用于格式化列的数据 -->
          <el-table-column label="聘用形式" prop="formOfEmployment" sortable="" :formatter="formatType" />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <!-- <el-table-column label="入职时间" prop="timeOfEntry" sortable=""> -->
          <!-- <template v-slot="scope">
              {{ scope.row.timeOfEntry|formatData }}
            </template> -->
          <!-- </el-table-column> -->
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template v-slot="scope">
              {{ scope.row.timeOfEntry|formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template #default="{ row }">
              <el-switch v-model="row.enableState" :inactive-value="0" :active-value="1" active-color="green" inactive-color="lightgray" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row:{id}}">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="handleDelete(id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination layout="sizes,prev, pager, next,jumper,->,total" :total="total" :current-page="queryParams.page" :page-size="queryParams.size" :page-sizes="[2,4,6,8,10]" @current-change="changePage" @size-change="changeSize" />
        </div>
      </el-card>
    </div>
    <add-employee :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
import Types from '@/api/constant/employees'
import AddEmployee from '@/views/employees/components/AddEmployee.vue'
export default {
  components: {
    AddEmployee
  },
  data () {
    return {
      // 控制添加弹窗显示开关【标志位】
      showDialog: false,
      // 加载
      loading: false,
      // 员工列表数据
      list: [],
      // 列表总数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        size: 10
      }
    }
  },
  created () {
    // 渲染页面的员工列表
    this.loadEmployeeList()
    // this.handleIndex()
  },
  methods: {
    // 状态格式化
    formatStatus (row) {
      // 使用find方法返回其中的一项
      const obj = Types.workingState.find((item) => {
        return parseInt(item.id) === parseInt(row.enableState)
      })
      return obj ? obj.value : '其它'
    },
    // 删除员工
    async handleDelete (id) {
      try {
        // 1.先给一个提示，确认是想删除
        const res = await this.$confirm('确定要删除吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (res === 'cancel') return
        // 确定要取消，掉接口进行删除
        const ret = await reqDelEmployee(id)
        if (ret.code === 10000) {
          // 给提示，删除成功
          this.$message.success('删除员工成功')
          // 刷新列表
          this.loadEmployeeList()
        }
      } catch (error) {
        this.$message.warning('删除员工失败')
      }
    },
    // 数据格式化聘用形式，参数1表示row
    // 	Function(row, column, cellValue, index)
    formatType (row) {
      // 使用find方法返回其中的一项
      const obj = Types.hireType.find((item) => {
        // formOfEmployment是员工列表中属性的标识
        // 比较表单hireType中的id是否与员工列表中的formOfEmployment值相等
        return parseInt(item.id) === parseInt(row.formOfEmployment)
      })
      return obj ? obj.value : '其它'
    },
    // 序号处理
    handleIndex (index) {
      const { page, size } = this.queryParams
      return (page - 1) * size + index + 1
    },
    // *监听每页条数的变化
    changeSize (size) {
      // 切换传参
      this.queryParams.size = size
      // 重新拉取数据
      this.loadEmployeeList()
    },
    // *监听页码的切换操作
    changePage (page) {
      // 切换传参，page表示切换后最新的页码
      this.queryParams.page = page
      // 重新拉取数据
      this.loadEmployeeList()
    },
    // 获取员工数据列表
    async loadEmployeeList () {
      try {
        this.loading = true
        const res = await reqGetEmployeeList(this.queryParams)
        // console.log('员工列表', res)
        if (res.code === 10000) {
          // 拿到列表跟total总数
          this.list = res.data.rows
          this.total = res.data.total
          // this.$message.success('获取员工数据列表成功')
        }
      } catch (error) {
        this.$message.error('获取员工数据列表失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
